<template>

  <div class="company-box" style="width: 1200px;margin: 0 auto;">
    <!-- <topnav></topnav> -->
    <div style="position: relative;">
      <div class="forbody">
        <div class="book-type-top">
          <span>图书分类</span>
        </div>
        <div class="book-type">
        <el-tree :data="list" node-key="id" :props="defaultProps"  accordion @node-click="handleNodeClick" class="fortree"></el-tree>
       </div>
        <!-- <div v-for="item in bookTree" :key="item.id" style="margin: 10px 25px">
          <el-popover placement="right" width="400" trigger="hover" :ref="'box'+item.id">
            <div>
              <div v-for="item2 in item.children" :key="item2.id" style="margin: 10px;">
                <span
                  style="font-weight: 500;color: #62D5C8;margin-right: 15px;display: inline-block;width: 30px;float: left;">
                  {{item2.name}}
                </span>

                <div v-for="item3 in item2.children" :key="item3.id"
                  style="font-size: 12px;display: inline-block;float: left;">
                  <a href="#" style="color: #61687C;text-decoration: none;"
                    @click="handleBookType(item3.id, [item.name, item2.name, item3.name],'box'+item.id)">{{item3.name}}</a>
                  <el-divider direction="vertical"></el-divider>
                </div>
                <br />
              </div>
            </div>

            <div slot="reference" style="border-bottom: 1px solid #DCDFE6;padding-bottom: 10px;">
              <a href="#" style="font-weight: 600; color: #62D5C8;text-decoration: none;">{{item.name}}</a>
              <span style="float: right;color: #62D5C8;font-weight: 600;"> > </span>
            </div>
          </el-popover>
        </div> -->
      </div>
    </div>

    <div style="margin-top: -38px;margin-left: 260px;">
      <div style="width: 935px;" class="search-div">
        <el-card class="box-card">
          <el-input placeholder="搜索书名、 作者、 出版社" v-model="search.keyword" class="input-with-select"
            style="height: 35px;line-height: 35px;border:1px solid #FF2832">
            <el-button slot="append" icon="el-icon-search" @click="handleSearch" style="background-color:#FF2832;color:white;height: 40px;width: 95px;margin-right: -21px;margin-top: 0.1px;"> 搜索</el-button>
          </el-input>
        </el-card>
      </div>

      <div>

        <!-- <div style="float: right;margin: 20px 0px;">
          <el-input-number v-model="search.priceBegin" placeholder="起始价格" size="small" controls-position="right"
            :min="0"></el-input-number>
          <span>-</span>
          <el-input-number v-model="search.priceEnd" placeholder="中止价格" size="small" controls-position="right" :min="0">
          </el-input-number>
        </div> -->
      </div>
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 20px 0;display: inline-block;">
                  <el-breadcrumb-item><a href="#" @click="handleBookTypeAll">全部分类</a></el-breadcrumb-item>
                  <el-breadcrumb-item v-for="item in typeArr" :key="item">{{item}}</el-breadcrumb-item>
                </el-breadcrumb> -->
      <div>
        <div style="margin: 80px;">
        <el-row :gutter="20" >
          <h2 class="nores" v-if="selectRes">
            查找不到你想要的书籍
          </h2>
          <el-col :span="6" v-for="item in bookList" :key="item.id">
            <div class="grid-content bg-purple" style="width: 150px;height: 250px;">
              <a :title="item.bookName" @click="handleBookInfo(item)">
                <img :src="item.coverImg" style="width: 150px;display: block;height: 150px;" />
                <p
                  style="color: #000;font-size: 12px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin: 7px 0;">
                  {{item.title}}
                </p>
                <p style="color: #aaa;font-size: 12px;">{{item.author}}</p>
                <p style="color: #c30;">￥{{item.price}}</p>
              </a>
            </div>
          </el-col>
        </el-row>
        </div>
      </div>

      <el-pagination background layout="prev, pager, next" :total="total" :page-size="9"  :current-page="page"
        @current-change="handleCurrentChange" style="text-align: center;margin: 20px 0;"></el-pagination>
    </div>

    <el-dialog title="图书详情" :visible.sync="bookDialogVisible" width="60%" :modal="false">

      <div style="display:flex;margin-bottom: 50px;">
        <div style="width: 300px;">
          <img :src="bookInfo.coverImg" style="width: 300px;display: inline-block;" />
        </div>

        <div style="flex:1">
          <span style="color: #323232;font-size: 15px;line-height: 20px;font-weight: 600;">{{bookInfo.title}}{{bookInfo.bookName}}</span>
          <br />
          <br />
           <span v-if="false">{{bookInfo.id}}</span>
          <span>{{bookInfo.synopsis}}</span>
          <el-divider></el-divider>
          <span style="font-size: 13px;">作者：<span style="color: #00C2B3;">{{bookInfo.author}}</span></span>
          <span style="font-size: 13px;margin-left: 30px;">出版社：<span
              style="color: #00C2B3;">{{bookInfo.press}}</span></span>
          <span style="font-size: 13px;margin-left: 30px;">印次：
            <span
              style="color: #00C2B3;">{{bookInfo.impression}}</span>
              </span>
                <span style="font-size: 13px;">店铺名：<span style="color: #00C2B3;">{{bookInfo.shopName}}</span>
                </span>
                  <span style="font-size: 13px;">库存：<span style="color: #00C2B3;">{{bookInfo.stock}}</span>
                  </span>
          <br />
          <br />
          <span style="color: #e52222;">￥<span style="font-size: 26px;">{{bookInfo.price}}</span> </span>
          <br />
          <br />
          <el-button type="danger" icon="el-icon-shopping-cart-full" size="small" @click="handleShoppingCart">加入购物车
          </el-button>

        </div>
      </div>

      <el-divider content-position="center">{{bookCommentList.length == 0 ? '暂无评论':'用户评论'}}</el-divider>

      <div v-for="item in bookCommentList" :key="item.commentTime">
        <br />
        <span style="font-size: 10px;margin: 15px;">发布时间：<span>{{item.commentTime}}</span></span>
        <br />
        <br />
        <span style="margin:15px;font-size: 14px;color: #414A60;">{{item.comment}}</span>

        <el-divider></el-divider>
      </div>

      <el-pagination v-show="bookComentTotal > 5" layout="prev, pager, next" :total="bookComentTotal" :page-size="5"
        @current-change="handleCurrentChange"  :current-page="bookComentPage" style="text-align: center;margin: 20px 0;"></el-pagination>

    </el-dialog>

  </div>
</template>

<script>
import { getAllBooks, selectBookByKeyword, getSomeBooks, getBookComment } from '@/api/book'
import { getAllCate } from '@/api/category'
import { addCart } from '@/api/shopCar'
// import topnav from '../components/topnav.vue'
// import {
//   mapState
// } from 'vuex'
/**
   * author
   * description   首页
   */
export default {
  name: 'index',
  // computed: {
  //   ...mapState(['bookTree'])
  // },
  inject: ['reload'],
  components: {
    // topnav
  },
  data () {
    return {
      flag: 0,
      list: [],
      defaultProps: {
        children: 'children',
        label: 'catagName'
      },
      selectRes: false, // 查找结果是否为无
      bookList: [],
      total: 0,
      pagenum: 1,
      pagesize: 10,
      search: {
        keyword: ''
      },
      bookId: 0,
      typeArr: [],
      bookDialogVisible: false,
      bookInfo: {},
      bookCommentList: [],
      bookComentTotal: 0,
      bookComentPage: 1
    }
  },
  mounted () {
    this.reload()
  },
  created () {
    this.getBooks()
    this.getAlltree()
    // this.func()
  },
  methods: {
    // func () {
    //   // var flag = 0
    //   if (!this.flag) {
    //     this.flag = 1
    //     location.reload()
    //   }
    // },
    getAlltree () {
      getAllCate().then(res => {
        console.log(res.data.data)
        this.list = res.data.data
      })
    },
    handleNodeClick (value) {
      // 获取节点的所有值
      console.log(value)
      getSomeBooks(value.id, value.cataType).then(res => {
        console.log(res.data.data)
        if (res.data.meta.status === 200) {
          this.bookList = res.data.data
          this.bookList.forEach((item, index) => {
            item.coverImg = 'http://localhost:4096/img/' + item.coverImg
          })
          this.$message({
            message: res.data.meta.msg,
            type: 'success'
          })
        } else {
          this.$message({
            message: res.data.meta.msg,
            type: 'warning'
          })
        }
      })
    },
    handleSearch () {
      this.pagesize = 10
      this.pagenum = 0
      // search.keyword
      const data = {
        pagenum: this.pagenum,
        pagesize: this.pagesize,
        key: this.search.keyword
      }
      // console.log(data)
      selectBookByKeyword(data).then(res => {
        console.log(res.data.data)
        const results = res.data.data
        this.bookList = results
        this.bookList.forEach((item, index) => {
          item.coverImg = 'http://localhost:4096/img/' + item.coverImg
        })
        if (!results.length) {
          this.selectRes = true
        }
      })
    },
    handleBookInfo (book) {
      console.log(book)
      this.bookInfo = book
      this.bookDialogVisible = true
      this.bookComentPage = 1
      this.getComments()
    },
    handleBookTypeAll () {
      this.typeArr = []
      this.search.type = null
      this.getBooks()
    },
    handleBookType (type, typeArr, ref) {
      this.typeArr = typeArr
      this.search.type = type
      console.log(this.$refs[ref][0])
      this.$refs[ref][0].handleMouseLeave()
      this.getBooks()
    },
    // 获取所有图书
    getBooks () {
      getAllBooks().then(res => {
        console.log(res.data.data)
        this.bookList = res.data.data
        this.bookList.forEach((item, index) => {
          item.coverImg = 'http://localhost:4096/img/' + item.coverImg
        })
      })
    },
    // 获取评论
    getComments () {
      this.bookId = this.bookInfo.id
      getBookComment(this.bookId).then(res => {
        this.bookCommentList = res.data.data
      })
      console.log(this.bookCommentList.length)
    },
    handleCurrentChange (val) {
      this.page = val
      this.getBooks()
    },
    // 添加购物车
    handleShoppingCart () {
      if (localStorage.getItem('userMsg')) {
        const data = {
          bookTitle: this.bookInfo.title,
          bookId: this.bookInfo.id,
          price: this.bookInfo.price,
          coverImg: this.bookInfo.coverImg.substring(this.bookInfo.coverImg.lastIndexOf('/')),
          num: 1,
          accId: JSON.parse(localStorage.getItem('userMsg')).id
        }
        console.log(data)
        addCart(data).then(res => {
          console.log(res)
          this.bookDialogVisible = false
          this.$message({
            message: '购物车加入成功',
            type: 'success'
          })
        })
      } else {
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style scoped>
  .nores {
    text-align: center;

  }
  .book-type {
    width: 190px;
    height: 500px;
    border-top: 2px dotted #487a6f;
    border-bottom: 1px solid #487a6f;
    border-left: 1px solid #487a6f;
    border-right: 1px solid #487a6f;
    margin-bottom: -50px;
    position: absolute;
  }

  .book-type-top {
    height: 35px;
    width: 192px;
    margin-top:50px;
    text-align: center;
    line-height: 34px;
    background: #487a6f;
    color: white;
    font-size: 18px;
    font-family: "Microsoft Yahei";
    margin-top: -1px -1px 0 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  .fortree{
    color: #487a6f;
    font-size: 14px;
    height: 24px;
    line-height: 24px;
    font-weight: bold;
}
.input-with-select >>> .el-input__inner:focus{
  border-color:pink
  }
</style>
